﻿<template>
  <div class="wareHouse-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<TableSearch :search="tb.tableData.search" @search="onSearch" />
		</el-card>

		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<Table ref="tableRef" v-bind="tb.tableData" :getData="getData" :exportChangeData="exportChangeData" @sortHeader="onSortHeader" @selectionChange="tableSelection">
				<template #command>
					<el-button type="primary" icon="ele-Plus" @click="openAddConfig" v-auth="'warehouse:add'"> 新增 </el-button>
					<el-button v-if="state.selectlist.length > 0" type="danger" icon="ele-Delete" @click="bacthDelete" v-auth="'warehouse:delete'"> 批量删除 </el-button>
				</template>
				<template #usable="scope">
					<el-tag v-if="scope.row.usable == 1"> 正常 </el-tag>
					<el-tag type="danger" v-else> 禁用 </el-tag>
				</template>
				<template #action="scope">
          <el-button icon="ele-Edit" size="small" text type="primary" @click="openEditConfig(scope.row)" v-auth="'warehouse:edit'"> 编辑 </el-button>
					<el-dropdown>
            <el-button icon="ele-MoreFilled" size="small" text type="primary" style="padding-left: 12px" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="ele-Delete" @click="delConfig(scope.row)"  v-auth="'warehouse:delete'">删除</el-dropdown-item> 
              <el-dropdown-item icon="ele-TurnOff" @click="disableClick(scope.row)" v-auth="'warehouse:edit'">禁用</el-dropdown-item> 
            </el-dropdown-menu>
            </template>
          </el-dropdown>
				</template>
			</Table>
		</el-card> 

		<EditForm ref="editFormRef" :title="state.editFormTitle" @reloadData="updateData" />
	</div>
</template>

<script lang="ts" setup="" name="wareHouse">
  import {  onMounted, reactive, ref, defineAsyncComponent, nextTick } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import { auth } from '/@/utils/authFunction';   
  import { pageWareHouse, deleteWareHouse } from '/@/api-services/api';

  // 引入组件
  import EditForm from '/@/views/basic/warehouse/component/edit.vue'
  const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
  const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
  const tableRef = ref<RefType>();
  const editFormRef = ref<InstanceType<typeof EditForm>>();

  const state = reactive({
    editFormTitle: '',
    selectlist: [] as EmptyObjectType[],
    groupList: [] as Array<String>,
  });

  const tb = reactive<TableDemoState>({
    tableData: {
      // 表头内容（必传，注意格式）
      columns: [
        { prop: 'sortId', label: '序号', width: 70, align: 'left', sortable: 'custom', isCheck: true },  
        { prop: 'warehouseNo', label: '仓库编号', width: 100, align: 'left', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'warehouseName', label: '仓库名称', width: 120, align: 'left', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'manager',label: '管理账号', width: 120, align: 'left', isCheck: true },
        { prop: 'managerName', label: '管理员姓名', width: 120, align: 'left', isCheck: true },
        { prop: 'usable', label: '状态', width: 70, align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
        { prop: 'createdUserName', label: '创建人', width: 120, align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
        { prop: 'updatedUserName', label: '修改人', width:120, align: '', headerAlign: 'left', showOverflowTooltip: true, isCheck: true },
        { prop: 'remark',label: '备注描述', align: 'left', sortable: 'custom', isCheck: true },
        { prop: 'action', label: '操作', width:110, type: 'action', align: 'left', isCheck: true, fixed: 'right', hideCheck: true },
      ],
      // 配置项（必传）
      config: {
        isStripe: false, // 是否显示表格斑马纹
        isBorder: true, // 是否显示表格边框
        isSerialNo: false, // 是否显示表格序号
        isSelection: true, // 是否勾选表格多选 
        showSelection:true, //是否显示表格多选
        pageSize: 10, // 每页条数
        hideExport: false, //是否隐藏导出按钮 
        hidePrint:false,//是否隐藏打印按钮
        exportFileName: '资产仓库', //导出报表的文件名，不填写取应用名称
      },
      // 搜索表单，动态生成（传空数组时，将不显示搜索，type有3种类型：input,date,select）
      search: [
        { label: '仓库编号', prop: 'warehouseNo', placeholder: '搜索编号', required: false, type: 'input' },
        { label: '仓库名称', prop: 'warehouseName', placeholder: '搜索名称', required: false, type: 'input' },
        { label: '管理员', prop: 'managerName', placeholder: '搜索管理员', required: false, type: 'input' },
        // { label: '创建时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
      ],
      param: {},
      defaultSort: {
        prop: 'sortId',
        order: 'ascending',
      },
      customPrintFun:function(_param:any,_data:any){
        console.log(_param);
        console.log(_data);
        ElMessage.success('准备打印数据'+JSON.stringify(_data));
      }
    },
  });

  // 更新数据
  const updateData = () => {
    tableRef.value.handleList(); 
  };

  const getData = (param: any) => { 
    return pageWareHouse(param).then((res) => {
        return res.data;
      });
  };
  const exportChangeData = (data: Array<EmptyObjectType>) => {
    data.forEach((item) => {
      item.usable = item.usable == 1 ? '可用' : '禁用';
    });
    return data;
  };
  // 拖动显示列排序回调
  const onSortHeader = (data: object[]) => {
    tb.tableData.columns = data;
  };
  // 搜索点击时表单回调
  const onSearch = (data: EmptyObjectType) => {
    tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
    nextTick(() => {
      tableRef.value.pageReset();
    });
  };
  
  //表格多选事件
  const tableSelection = (data: EmptyArrayType[]) => { 
    console.log('============================');
    console.log(data); 
  };

  onMounted(async () => {
    //初始化加载
  });

  // 打开新增页面
  const openAddConfig = () => {
    state.editFormTitle = '添加资产仓库';
    editFormRef.value?.openDialog({ sysFlag: 2 });
  };

  // 打开编辑页面
  const openEditConfig = (row: any) => {
    state.editFormTitle = '编辑资产仓库';
    editFormRef.value?.openDialog(row);
  };

  // 删除
  const delConfig = (row: any) => {
    ElMessageBox.confirm(`确定删除资产仓库：【${row.warehouseName}】?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(async () => { 
      await deleteWareHouse({ id: row.id });
      tableRef.value.handleList();
      ElMessage.success('删除成功');
    })
    .catch(() => {});
  };
  //禁用事件
  const disableClick= (row: any) => {
    ElMessage.success('禁用处理....');
  };

  //批量删除
  const bacthDelete = () => {
    ElMessage.error('暂不支持!!!');
  };
</script>

<style scoped>
	.example-showcase.el-dropdown {
		margin-left: 15px;
	}
	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}
</style>

